<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">基础数据</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>管理员设置</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索区域 -->
    <!-- {{ form }} -->
    <div style=" padding: 40px; margin-top: 20px; border: solid 1px black;">

        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="部门名称">
                <el-input v-model="searchForm.DepartmentName" placeholder="请输入部门" clearable />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="searchForm.RealName" placeholder="请输入姓名" clearable />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getData()">搜索</el-button>
                <el-button type="danger" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- {{ departTree }} -->
    <!-- 数据table区域 -->
    <div style=" padding: 20px; margin-top: 20px; height: 500px; border: solid 1px black;">

        <!-- 添加按钮 -->
        <el-button type="success" @click="IsShow = true">新增</el-button>


        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" width="200" label="编号" />
            <el-table-column prop="accountName" label="账号" width="120" />
            <el-table-column prop="realName" label="姓名" width="120" />
            <el-table-column prop="phone" label="手机号" width="120" />
            <el-table-column prop="idCard" label="身份证" width="190" />
            <el-table-column prop="roleName" label="角色名称" width="120" />
            <el-table-column prop="departmentName" label="部门名称" width="120" />
            <el-table-column fixed="right" label="操作" min-width="120">
                <template v-slot="scope">
                    <el-button link type="danger" v-if="scope.row.roleId == 2 || scope.row.roleId == 3" size="small"
                        @click="del(scope.row.id)">
                        删除
                    </el-button>
                    <el-button link type="primary" v-if="scope.row.roleId == 2 || scope.row.roleId == 3" size="small"
                        @click="update(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>




    <!-- 对话框 -新增 -->
    <el-dialog v-model="IsShow" title="添加账号" width="500">
        <el-form :model="form">
            <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input v-model="form.accountName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="真实姓名" :label-width="formLabelWidth">
                <el-input v-model="form.realName" autocomplete="off" />
            </el-form-item>

            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="form.phone" autocomplete="off" />
            </el-form-item>

            <el-form-item label="身份证号" :label-width="formLabelWidth">
                <el-input v-model="form.idCard" autocomplete="off" />
            </el-form-item>
            <el-form-item label="选择角色" :label-width="formLabelWidth">
                <el-select v-model="form.roleId" placeholder="请选择角色">
                    <el-option v-for="item in roleData" :label="item.roleName" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="选择部门" :label-width="formLabelWidth">
                <el-cascader v-model="form.departmentId" :options="departTree" :props="props" /> <!--从官网粘贴到 -->
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="IsShow = false">取消</el-button>
                <el-button type="primary" @click="addAccount()">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 对话框 更新 -->
    <el-dialog v-model="IsShowUp" title="更新账号" width="500">
        <el-form :model="form">
            <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input v-model="form.accountName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="真实姓名" :label-width="formLabelWidth">
                <el-input v-model="form.realName" autocomplete="off" />
            </el-form-item>

            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="form.phone" autocomplete="off" />
            </el-form-item>

            <el-form-item label="身份证号" :label-width="formLabelWidth">
                <el-input v-model="form.idCard" autocomplete="off" />
            </el-form-item>
            <el-form-item label="选择角色" :label-width="formLabelWidth">
                <el-select v-model="form.roleId" placeholder="请选择角色">
                    <el-option v-for="item in roleData" :label="item.roleName" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="选择部门" :label-width="formLabelWidth">
                <el-cascader @change="handleChange" v-model="form.departmentId" :options="departTree" :props="props"
                    style="width:420px" />
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="IsShowUp = false">取消</el-button>
                <el-button type="primary" @click="updateData()">
                    更新
                </el-button>
            </div>
        </template>
    </el-dialog>


</template>

<script setup>
import axios from 'axios';
import { isShallow, onMounted, reactive, ref } from 'vue';
import { ElMessage, ElTable, ElMessageBox } from 'element-plus'

//对话框
const form = reactive({
    id: 0,
    "accountName": "",
    "accountPass": "",
    "realName": "",
    "phone": "",
    "idCard": "",
    "roleId": 0,
    "departmentId": 0
})



//所有部门的树状数组
const departTree = ref([]);
const getDepartTree = () => {
    axios.get('http://localhost:5071/api/Account/GetDepartmentTree').then(res => {
        departTree.value = res.data.data;
    });

}

const props = {
    label: 'departName',
    value: 'id',
    checkStrictly: true, //是否支持选择任意一级
}

//级联选择发生变化时,处罚change事件.把选中的最后一个值,赋值给部门id
const handleChange = (value) => {
    form.departmentId = value[value.length - 1]
}
//所有角色的数组
const roleData = ref([]);
const getRoles = () => {

    //http://localhost:5071/api/Role/GetAllRole
    axios.get('http://localhost:5071/api/Role/GetAllRole')
        .then((res) => {
            if (res.data.code == 200) {
                roleData.value = res.data.data
            }

        });

}

const reset = () => {
    searchForm.DepartmentName = '';
    searchForm.RealName = '';
}

//搜索区域的表单数据定义
const searchForm = reactive({
    DepartmentName: '',//部门名称
    RealName: ''//姓名
});

const tableData = ref([])//绑定到数据列表的数据源
const getData = () => {
    axios.get('http://localhost:5071/api/Account/QueryAccount',
        { params: { DepartmentName: searchForm.DepartmentName, RealName: searchForm.RealName } })
        .then((res) => {

            console.log(res)
            console.log("有数据")
            if (res.data.code == 200) {
                tableData.value = res.data.data
            }

        });

}


const IsShow = ref(false)
//添加方法
const addAccount = () => {
    //  
    axios.post('https://localhost:7068/api/Account/CreateAccount', form).then(
        res => {
            if (res.data.data > 0) {
                ElMessage.success(res.data.msg);
                getData();
                IsShow.value = false;
            } else {

                ElMessage.error(res.data.msg);
            }

        }
    )

}


//删除方法
const del = (id) => {

    //删除之前,要有友好提示.
    ElMessageBox.confirm(
        '您确定删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            axios.put('https://localhost:7068/api/Account/DelAccount', { id: id }).then(res => {

                if (res.data.code == 203) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功!',
                    })
                    getData();//删除之后刷新页面数据
                } else {
                    ElMessage({
                        type: 'info',
                        message: '删除失败!',
                    })

                }

            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '您取消了操作!',
            })
        })
}



const IsShowUp = ref(false)
//弹窗并反填要更新的内容
const update = (row) => {
    form.accountName = row.accountName
    //form.accountPass = row.accountPass

    form.id = row.id;
    form.realName = row.realName
    form.phone = row.phone
    form.idCard = row.idCard
    form.roleId = row.roleId
    form.departmentId = row.departmentId

    IsShowUp.value = true;
}
//调用接口把数据保存到数据库,
const updateData = () => {

    //修改之前要不要友好提示?
    axios.put('https://localhost:7068/api/Account/UpdateAccount', form).then(res => {
        if (res.data.data > 0) {
            ElMessage({
                type: 'info',
                message: '更新成功!',
            })
            getData();//删除之后刷新页面数据
            IsShowUp.value = false;

        } else {
            ElMessage({
                type: 'info',
                message: '更新失败!'
            })
        }
    });

}

onMounted(() => {
    getData();
    getRoles();//角色列表
    getDepartTree();//部门树
})



</script>